<template>
  <view class="box p-x-32 p-t-32 p-b-32">
    <uv-navbar placeholder title="退款详情" bgColor="#FFF" :autoBack="true"></uv-navbar>
    <view class="contentForm" v-if="refundDeta">
      <view class="mallProd flex m-b-20 p-24" v-for="(item, index) in refundDeta.products" :key="index">
        <view>
          <uv-image width="192rpx" height="192rpx" :src="item.image" radius="12rpx"></uv-image>
        </view>
        <view class="flex-1 flex-col m-l-20">
          <view class="flex justify-bet align-ali">
            <view class="font-32 font-weight-bold">
              {{ item.product_name }}
            </view>
          </view>
          <view class="flex m-t-25 flex-wrap" v-if="item.add_type == 1">
            <view class="content font-28 m-r-20 p-x-14 p-y-6" v-for="(item, index) in item.suk?.split(',')"
              :key="index">
              {{ item }}
            </view>
          </view>
          <view class="m-b-30 m-t-10 " style="gap: 20rpx" v-else>
            <view class="font-26 font-weight-middle"> 实际周长:{{ item.reality_size }}cm</view>
            <view class="font-26 m-t-10 font-weight-middle"> {{ item.suk.line.product_name }}({{
              item.suk.line.suk
            }}){{ item.total_number || '0' }}颗珠子
              <!-- {{item.suk.materials.map(item2 => item2.product_name + 'x'
                +
                item2.number).join('、')}} -->
            </view>
          </view>
          <view class="flex m-t-28 justify-bet align-ali">
            <view class="font-28">
              x{{ item.number }}
            </view>
            <view class="font-36 font-weight-bold">
              ￥{{ item.total_price / 100 }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="description m-t-20 p-30">
      <view class="font-32">
        原因说明
      </view>
      <view class="descripText font-24 m-t-16 p-25">
        {{ refundDeta?.refund_info.refund_reason }}
      </view>
      <view class="font-32 m-t-24">
        图片
      </view>
      <view class="flex-wra m-t-20">
        <view v-for="(item, index) in refundDeta?.refund_info.refund_images" :key="index" class="m-r-24 m-b-24">
          <uv-image :src="item" width="173rpx" height="173rpx" radius="12rpx"
            @click="getImage(refundDeta?.refund_info.refund_images, index)"></uv-image>
        </view>
      </view>
    </view>
    <view class="discountCoupons m-t-24 p-26">
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey">
          退款金额
        </view>
        <view class="font-28">
          ￥{{ refundDeta?.refund_info.refund_amount / 100 }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali"
        v-if="refundDeta?.products[0].add_type == 2 && gurationData?.status == 0">
        <view class="font-28 text-greey"> 制作费 </view>
        <view class="font-28">
          ￥{{ gurationData?.price }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey">
          申请状态
        </view>
        <view class="font-28">
          {{ refundDeta?.refund_info.refund_status }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey">
          优惠券
        </view>
        <view class="font-28">
          ￥{{ refundDeta?.price_info.deduction_price / 100 }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali">
        <view class="font-28 text-greey">
          申请时间
        </view>
        <view class="font-28">
          {{ refundDeta?.time_info.apply_time }}
        </view>
      </view>
      <view class="flex m-t-30 justify-bet align-ali" v-if="refundDeta?.time_info.audit_time">
        <view class="font-28 text-greey">
          审核时间
        </view>
        <view class="font-28">
          {{ refundDeta?.time_info.audit_time }}
        </view>
      </view>
    </view>
    <view class="description m-t-20 p-30" v-if="refundDeta?.refund_info.audit_remark">
      <view class="font-32">
        拒绝说明
      </view>
      <view class="descripText font-24 m-t-16 p-25">
        {{ refundDeta?.refund_info.audit_remark }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { refundDetail, getConfiguration } from '@/api/api'
import { ref, onMounted, reactive, getCurrentInstance } from 'vue';
import { onReachBottom, onShow, onReady, onLoad } from '@dcloudio/uni-app';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
const orderSn = ref(null)//订单号
const refundDeta = ref(null)//退款详情
const gurationData = ref(null);//获取基础信息

onLoad((ope) => {
  if (ope.orderSn) {
    orderSn.value = ope.orderSn
    refundDetails()
  }
  getConfigurations()
})
//获取基础信息
const getConfigurations = () => {
  getConfiguration({ type: 4 }).then((res) => {
    console.log(res, '基础信息');
    gurationData.value = res.data;
  })
}
//退款详情
const refundDetails = () => {
  refundDetail({
    order_sn: orderSn.value
  }).then(res => {
    console.log(res)
    if (res.code == 1) {
      refundDeta.value = res.data
    }
  })
}
//图片预览
const getImage = (list, index) => {
  uni.previewImage({
    urls: list,
    current: index,
    loop: true,
  })
}

</script>

<style lang="scss" scoped>
.box {
  min-height: 100vh;
  background-color: #f8f8f8
}

.contentForm {
  width: 686rpx;
  margin: 0 auto;
  background: #FFF;
  border-radius: 12rpx;

  .mallProd {
    background: #FFF;
    border-radius: 12rpx;

    .content {
      background: #F3F3F3;
      border-radius: 12rpx;
    }
  }
}

.description {
  width: 686rpx;
  // height: 474rpx;
  background: #FFF;
  border-radius: 12rpx;

  .descripText {
    background: #F8F8F8;
    border-radius: 12rpx;
  }
}

.discountCoupons {
  width: 686rpx;
  // height: 216rpx;
  background: #FFF;
  border-radius: 12rpx;

  view:first-child {
    margin-top: 0 !important;
  }

  .discount {
    width: 634rpx;
    height: 96rpx;
    background: #F6F6F6;
  }
}
</style>
